<template>
  <div>
    <div id="myecharts" style="width: 80%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { echartss } from "@/api/apis";
export default {
  data() {
    return {
      dataarr:[],
      datalist:[]
    };
  },
  mounted() {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }

    echartss().then((res) => {
      // console.log(res);
      res.data.data.datatime.forEach(element => {
        // element=element.split(" ")
        element=element.split(" ")[0]
        this.dataarr.push(element)
        // console.log(element)
      });
      this.datalist=res.data.data.dtacount.reverse()
      this.dataarr=this.dataarr.reverse()
      // console.log(this.dataarr)
      let myechartss = echarts.init(document.getElementById("myecharts"));

      //  配置对象
      let option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["访问次数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataarr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "访问次数",
            type: "line",
            stack: "次数",
            data:this.datalist ,
          },
        ],
      };
      myechartss.setOption(option);
    });
  }
};
</script>

<style scoped>
</style>